<template>
<ul>

  <li class="item" v-for="key of letters" :key="key"
    @click="change"
      @touchstart="handlestart"
      @touchmove="handlemove"
      @touchend="handleend"
      :ref="key"
  >
    {{key}}
  </li>

</ul>

</template>

<script>
  export default {
    name: 'Zimu',
    props:{
      cities:Object
    },
    data(){
      return{
        touchStatus:false,
        startY:0,
        timer:null
      }
    },
    updated(){
      this.startY=this.$refs['A'][0].offsetTop
    },
    computed:{
      letters(){
      const  lettters=[]
        for (let i in  this.cities) {
              lettters.push(i)
        }
        return lettters

      }
    },
    methods:{
      change(e){
        this.$emit('changehandle',e.target.innerText)
      },
      handlestart(e){
        this.touchStatus=true
      },
      handlemove(e){
        if (this.touchStatus){
            if (this.timer){
              clearTimeout(this.timer)
            }
            this.timer=setTimeout(()=>{
              const startY=this.startY
              const  cilentY=e.targetTouches[0].clientY-93
              const index=Math.floor((cilentY-startY)/20)
              //pandua
              if (index>=0&&index<this.letters.length){
                this.$emit('changehandle',this.letters[index])
              }
            },16)
        }
      },
      handleend(){
        this.touchStatus=false
      }
    }
  }
</script>


<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  ul
    position: absolute
    right: 0
    display: flex
    flex-direction column
    justify-content center
    top: 1.88rem
    width .3rem
    bottom: 0
    .item
      text-align: center
      color: purple
      line-height: .4rem


</style>
